<template>
	<div class="page">
		<Layout>
			<Header>
				<Layout>
					<Sider hide-trigger>
						<Card>
							<Row>
								<Col class="demo-split-pane">
									<Tag color="gold">楼主</Tag>
									<a href="#" v-text="main.user.username">AxMaster</a>
								</Col>
							</Row>
							<Avatar
									class="icon"
									:src="main.user.icon"
									alt
									srcset
							/>
							<Row>
								<Col span="12">LV:</Col>
								<Col span="12">1</Col>
							</Row>
						</Card>
					</Sider>
					<Layout>
						<Content>
							<Row>
								<Col span="24">
									<Card :bordered="false" class="card-mes">
										<p slot="title" v-text="main.title">Java使用教程详解</p>
										<div v-html="main.pageContent"></div>
									</Card>
								</Col>
							</Row>
							<Row class="content_modify">
								<Col>
									<Button type="primary" style="margin-right: 10px" onclick="location.href='#foot'">
										回复
									</Button>
									<!--									<Button type="info">编辑</Button>-->
								</Col>
							</Row>
						</Content>
					</Layout>
				</Layout>
			</Header>
			
			<Content>
				<Layout v-for="(r,i) in remarkPage.records">
					<Sider hide-trigger style="background: white;">
						<Card>
							<Row>
								<Col class="demo-split-pane">
									<Tag color="#FFA2D3">用户</Tag>
									<a href="#" v-text="r.username">LFT</a>
								</Col>
							</Row>
							<Avatar
									class="icon"
									:src="r.icon"
									alt
									srcset
							/>
							<Row>
								<Col span="12">LV:</Col>
								<Col span="12">1</Col>
							</Row>
						</Card>
					</Sider>
					<Layout>
						<Content>
							<Row>
								<Col span="24">
									<span v-text="`第${(remarkPage.current - 1) * remarkPage.size + i + 1}楼`">第一楼</span>
									<Card :bordered="false" class="card-mes">
										<p v-html="r.content" style="margin-bottom: 50px">楼主牛逼</p>
									</Card>
								</Col>
							</Row>
							<Row class="content_modify">
								<Col>
									<Button type="error" @click="delRemark(r.id,i)" v-if="User && User.id == r.userId">删除</Button>
								</Col>
							</Row>
						</Content>
					</Layout>
				</Layout>
			</Content>
			
			<Footer id="foot">
				<Row class="page_choose">
					<Col>
						<Page @on-change="changePage" @on-page-size-change="changepageSize" :total="remarkPage.total" :current="remarkPage.current" :page-size="remarkPage.size"
						      show-sizer show-elevator/>
					</Col>
				</Row>
				<Row style="background:#eee;padding:20px">
					<Col span="5">
						<Card :bordered="false" class="footcard-left">
							<p slot="title" v-text="User.username">axMaster</p>
							<Avatar
									class="icon"
									:src="User.icon"
									alt
									srcset
							/>
						</Card>
					</Col>
					<Col span="17" offset="2">
						<Card shadow>
							<div ref="editorElem"></div>
							<Button type="info" style="margin-top:20px" @click="sendRemark" v-if="User.id">发表评论</Button>
							<Button type="info" style="margin-top:20px" @click="$router.push('/login')" v-if="!User.id">登录后评论</Button>
						</Card>
					</Col>
				</Row>
			</Footer>
		</Layout>
	</div>
</template>

<script>
	import E from "wangeditor";
	import {mapActions, mapGetters} from 'vuex'
	
	export default {
		data: function () {
			return {
				main: {
					title: "标题",
					pageContent: "内容",
					user: {
						username: "用户名",
						icon: "xxx"
					}
				},
				remarkPage: {
					current: 1,
					pages: 1,
					records: [],
					size: 10,
					total: 2,
				},
				editor: "",
				editorContent: "",
			};
		},
		props: ['id'],
		computed: {
			...mapGetters(["User"])
		},
		methods: {
			...mapActions("page", ["getPage"]),
			...mapActions("user", ["getUser", "loginUser"]),
			...mapActions("remark", ["getAllRemark", "deleteRemark", "addRemark"]),
			delRemark: function (id,i) {
				this.deleteRemark({
					id,
					callback: success => {
						if(success){
							this.$Message.success("删除成功");
							this.remarkPage.records.splice(i, 1);
							this.remarkPage.total++;
						}
						!success && this.$Message.error("删除失败");
					}
				})
			},
			sendRemark: function () {
				this.addRemark({
					content: this.editorContent,
					pageId: this.id,
					userId: this.User.id,
					callback: success => {
						if(success){
							this.$Message.success("添加成功");
							this.remarkPage.records.push({
								content:this.editorContent,
								icon:this.User.icon,
								username:this.User.username
							});
							this.editor.txt.html("");
							this.editorContent = ""
							location.href = "#"
							this.changePage(1);
						}
						!success && this.$Message.error("添加失败");
					}
				})
			},
			changePage: function (page) {
				this.remarkPage.records = [];
				this.getRemark(page,this.remarkPage.size)
			},
			changepageSize: function (size) {
				this.remarkPage.size = size;
			},
			getRemark: function (page = 1,size = 10) {
				this.getAllRemark({
					pageId: this.id,
					page,size,
					callback: remarks => {
						this.remarkPage = remarks.remarks;
						this.remarkPage.records.forEach(x => {
							this.getUser({
								id: x.userId,
								info: (type, msg) => this.$Message[type](msg),
								callback: (user) => {
									let {username, icon} = user;
									this.$set(x, 'username', username)
									this.$set(x, 'icon', icon)
								}
							})
						})
					}
				})
			},
		},
		created: function () {
			this.getPage({
				id: this.id,
				callback: (page) => {
					let {title, pageContent} = page;
					this.getUser({
						id: page.userId,
						info: (type, msg) => this.$Message[type](msg),
						callback: (user) => {
							let {username, icon} = user;
							this.main = {
								title, pageContent,
								user: {
									username, icon
								}
							}
						}
					})
				}
			})
			
			this.getRemark();
		},
		mounted: function () {
			this.editor = new E(this.$refs.editorElem);
			this.editor.customConfig.onchange = html => {
				this.editorContent = html;
			};
			this.editor.customConfig.menus = [
				// 菜单配置
				"head", // 标题
				"bold", // 粗体
				"fontSize", // 字号
				"fontName", // 字体
				"italic", // 斜体
				"underline", // 下划线
				"strikeThrough", // 删除线
				"foreColor", // 文字颜色
				"backColor", // 背景颜色
				"link", // 插入链接
				"list", // 列表
				"justify", // 对齐方式
				"quote", // 引用
				"emoticon", // 表情
				"image", // 插入图片
				"table", // 表格
				"code", // 插入代码
				"undo", // 撤销
				"redo" // 重复
			];
			this.editor.create(); // 创建富文本实例
		}
	};
</script>
<style scoped>
	.ivu-layout {
		position: relative;
	}
	
	.ivu-layout {
		padding-left: 10px;
	}
	
	.ivu-layout-header {
		height: auto;
		padding: 0;
		margin-bottom: 10px;
	}
	
	.ivu-layout-header > .ivu-row,
	.ivu-layout-content > .ivu-row {
		line-height: initial;
		background: rgb(238, 238, 238);
	}
	
	.icon_area .ivu-avatar {
		text-align: center;
	}
	
	.icon {
		width: 60%;
		height: 60%;
	}
	
	.content_modify {
		position: absolute;
		bottom: 10px;
	}
	
	.content_show {
		background: #eee;
		padding: 20px;
		margin-bottom: 40px;
		position: unset;
	}
	
	.page_choose {
		padding-left: 30%;
		margin-bottom: 20px;
	}
</style>